<template>
  <div class="list_image" style="width: 100%;">
    <el-row>
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3" v-for="(o, i) in list_new" :key="i">
        <div class="item" :class="{ active: val.image_id === o.image_id }" @click="command(href, o)">
          <div class="media">
            <vue-lazy-component>
              <img :src="o.img ? $fullUrl(o.img) : '/img/preview.png'" :alt="o.title">
            </vue-lazy-component>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 预览弹窗 -->
    <el-dialog title="预览" :visible.sync="show">
      <div class="preview">
        <img :src="obj.img ? $fullUrl(obj.img) : '/img/preview.png'" :alt="obj.title">
        <el-button class="btn_del" slot="reference" size="mini" type="danger" @click="del({ image_id: obj.image_id })"
          plain>
          <i class="el-icon-delete"></i>
        </el-button>
      </div>
    </el-dialog>
    <!-- /预览弹窗 -->
  </div>
</template>

<script>
  export default {
    model: {
      event: 'change',
      prop: 'val'
    },
    props: {
      preview: {
        type: String,
        default: ""
      },
      query: {
        type: Object,
        default: function() {
          return {
            keyword: "",
            theme_id: "",
            type: "",
            color: "",
            user_id: 0
          }
        }
      },
      href: {
        type: String,
        default: ""
      },
      val: {
        type: Object,
        default: function() {
          return {
            keyword: "",
            theme: "",
            type: "",
            device: "",
            img: "",
            color: "",
            user_id: 0
          }
        }
      }
    },
    data() {
      return {
        index: 0,
        url_get_list: "~/apis/dev/image?",
        url_del: "~/apis/dev/image?method=del",
        list: [],
        obj: {},
        show: false
      }
    },
    methods: {
      /**
       * 删除图片
       * @param {Object} query 匹配条件
       */
      del(query) {
        this.$get(this.url_del, query, (json) => {
          if (json.result) {
            this.$toast(json.result.tip, json.result.bl ? 'success' : 'danger');
            this.get_list();
            this.show = false;
          } else if (json.error) {
            this.$toast(json.error.message, 'danger');
          } else {
            this.$toast('删除失败! 原因:是服务器连接失败!', "danger");
          }
        });
      },
      /**
       * 获取模板列表
       */
      get_list() {
        this.$get(this.url_get_list, {
          page: 0,
          size: '0'
        }, (res) => {
          if (res.result) {
            this.list = res.result.list.map((o) => {
              if (o.img && o.img.indexOf("/") === 0) {
                o.img = this.$fullUrl("~" + o.img);
              }
              return o;
            });
          } else {
            this.$message({
              message: res.error.message
            })
          }

        });
      },
      /**
       * 指令
       * @param {String} href 链接地址
       * @param {Object} o 当前出发的模板对象
       */
      command(href, o) {
        if (href && o.name === this.val.name) {
          this.$router.push(href + "image_id=" + o.image_id)
        } else {
          if (this.preview) {
            this.obj = o;
            this.show = true;
          }
          this.$emit('change', o);
        }
      }
    },
    created() {
      this.get_list();
    },
    computed: {
      /**
       * 计算 - 新模板列表，用于页面过滤显示
       */
      list_new() {
        var query = {};
        for (var k in this.query) {
          var val = this.query[k];
          if (val) {
            query[k] = val;
          }
        }
        var lt = [];
        this.list.map(o => {
          var bl = true;
          if (query.color && query.color !== o.color) {
            bl = false;
          } else if (query.type && query.type !== o.type) {
            bl = false;
          } else if (query.device && query.device !== o.device) {
            bl = false;
          } else if (query.theme_id && query.theme_id != o.theme_id) {
            bl = false;
          } else if (query.user_id && query.user_id !== o.user_id) {
            bl = false;
          }
          if (bl) {
            lt.push(o);
          }
        });
        return lt;
      }
    }
  }
</script>

<style scoped="scoped">
  .list_image {
    overflow: hidden;
  }

  .el-col {
    overflow: hidden;
  }

  .list_image .item {
    padding: 0.25rem;
    margin: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
  }

  .list_image img {
    width: 100%;
  }

  .media img {
    height: 10rem;
  }

  .list_image .doc {
    text-align: center;
  }

  .list_image .doc h5 {
    margin-top: 4px;
    margin-bottom: 0;
  }

  .list_image .active {
    border-color: #409EFF;
  }

  .preview {
    position: relative;
  }

  .preview:hover .btn_del {
    display: inline-block;
  }

  .btn_del {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: none;
  }
</style>
